<template>
  <div>
    <div class="btnClose" @click="close">
      <span class="iconfont iconicon-test"></span>
    </div>
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <div>
      <Commoninput
        @getinform="getnickname"
        message="请输入昵称"
        type="text"
        :regular="/^.{1,8}$/"
        mistake="请输入昵称"
      ></Commoninput>

      <Commoninput
        @getinform="getusername"
        message="请输入账号"
        type="text"
        :regular="/^.{1,8}$/"
        mistake="请输入账号"
      ></Commoninput>

      <Commoninput
        @getinform="getpassword"
        message="请输入密码"
        type="password"
        :regular="/^\w{3,12}$/"
        mistake="请输入正确6到12位的密码数"
      ></Commoninput>
    </div>
    <Commonbut name="去注册咯" @click.native="register"></Commonbut>
    <div class="job" @click="job">已有账号？去登录</div>
  </div>
</template>

<script>
// 输入框
import Commoninput from "../components/Commoninput .vue";
// 按钮
import Commonbut from "../components/Commonbut";
export default {
  components: { Commoninput, Commonbut },
  methods: {
    close() {
      // 编程式跳转
      this.$router.push("/");
      console.log(this.$router);
    },
    job() {
      // 编程式跳转
      //   this为路由本身
      this.$router.push("/login");
      console.log(this.$router);
    },

    getnickname(newValue) {
      this.nickname = newValue;
    },
    getusername(newValue) {
      this.username = newValue;
    },
    getpassword(newValue) {
      this.password = newValue;
    },
    // 发送请求-注册
    register() {
      this.$axios({
        method: "post",
        url: "register",
        data: {
          username: this.username,
          password: this.nickname,
          nickname: this.password,
        },
      }).then((res) => {
        console.log(res.data);
        if (
          this.username === "" &&
          this.nickname === "" &&
          this.password === ""
        ) {
          this.$Toast("请输入相关信息");
        } else if (this.username === "") {
          this.$toast("请输入用户名");
        } else if (this.password === "") {
          this.$toast("请输入密码");
        } else if (this.nickname === "") {
          this.$toast("请输入昵称");
        } else if (res.data.message == "注册成功") {
          this.$toast.loading({
            message: "注册成功,加载中...",
            forbidClick: true,
          });
          window.location.href = "/home";
        } else if (res.data.statusCode == 400) {
          this.$toast("用户已存在");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.logo {
  text-align: center;
  .iconfont {
    font-size: 126/360 * 100vw;
    color: #d81e06;
  }
}
.btnClose {
  .iconfont {
    font-size: 28/360 * 100vw;
  }
}
.job {
  text-align: center;
  padding-top: 16/360 * 100vw;
}
</style>